// 获取水杯的元素
const cups = document.querySelectorAll('.cup');
// 添加监听事件
cups.forEach((cup, index) => {
  cup.addEventListener('click', () => {
    // 清除所有选中样式
    // removeStyle();
    /*  
      我错误的地方在于不能一股脑的全清除，应该求出需要添加样式的一个边界值
    */
    let idx = getIndex(cup, index);
    // 小于等于触发水杯的添加选中样式,否则取消
    addStyle(idx);
    // 计算完成目标量
    calcStatus(idx);
  });
});

// 求出边界值
const getIndex = (cup, idx) => {
  // 当前节点如果是最后一个节点，判断当前节点是否选中
  if (idx === cups.length - 1 && cup.classList.contains('active')) {
    idx--;
  } else if (
    cup.classList.contains('active') &&
    !cup.nextElementSibling?.classList.contains('active')
  ) {
    // 如果当前节点是选中的但是下一节点是没选的，那么取消选中状态
    idx--;
  }
  return idx;
};

// 清除样式
const removeStyle = () => {
  cups.forEach((cup) => {
    cup.classList.remove('active');
  });
};

// 添加样式
const addStyle = (border) => {
  cups.forEach((cup, index) => {
    if (border >= index) {
      cup.classList.add('active');
    } else {
      cup.classList.remove('active');
    }
  });
};

// 计算完成状况
const calcStatus = (index) => {
  let target = ((index + 1) / 8) * 100;
  // 获取完成目标容器
  const goal = document.querySelector('.finish');
  goal.style.height = `${target}%`;
  goal.innerHTML = target ? `${target}%` : '';
  // 获取未完成目标容器
  const noGoal = document.querySelector('.noFinish');
  noGoal.style.height = `${100 - target}%`;
  noGoal.style.visibility = target !== 100 ? 'visible' : 'hidden';
  const goaltext = document.querySelector('.goal');
  goaltext.innerText = `${(2 * (100 - target)) / 100}L`;
};
